<script setup>
import { ref } from "vue";
const option = ref({
  // legend: {
  //   top: "bottom", //筛选
  // },
  // toolbox: { //右上角工具箱
  //   show: true,
  //   feature: {
  //     mark: { show: true },
  //     dataView: { show: true, readOnly: false },
  //     restore: { show: true },
  //     saveAsImage: { show: true },
  //   },
  // },
  title: {
    text: "各朝代文化繁荣度对比",
    left: "center",
    top: 8,
    textStyle: {
      color: "#000",
    },
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c}项指标 (占比{d}%)",
  },
  series: [
    {
      color: [
        "#D7AFAD",
        "#8dc6c2",
        "#E5CDDD",
        "#C7BED3",
        "#eed046",
        "#738BAD",
        "#85A397",
        "#E1B882",
        "#D9A89A",
        "#B67271",
        "#B1C6E1",
        "#D2A1BF",
        "#9D8DB2",
      ],
      top: 25,
      selectedMode: "single",
      name: "各朝代文化繁荣度对比",
      type: "pie",
      radius: [10, 70],
      center: ["50%", "50%"],
      roseType: "area",
      itemStyle: {
        borderRadius: 8,
      },
      //   label: {
      //     position: 'inner',
      //     fontSize: 14
      //   },
      data: [
        { value: 538, name: "元朝" },
        { value: 597, name: "唐朝" },
        { value: 506, name: "明朝" },
        { value: 454, name: "汉朝" },
        { value: 539, name: "秦朝" },
        { value: 589, name: "宋朝" },
        { value: 752, name: "先秦" },
        { value: 483, name: "三国" },
        { value: 587, name: "两晋" },
        { value: 687, name: "南北朝" },
        { value: 400, name: "五代十国" },
        { value: 687, name: "隋朝" },
        { value: 573, name: "清朝" },
      ].sort((a, b) => b.value - a.value),
    },
  ],
});
</script>

<template>
  <!-- 优秀文化页面的饼图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
